<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, orientation=portrait' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
	<script>
		
		
		var myPortraitQuery = window.matchMedia("(orientation: portrait)");
		function preventLandscape() {
		  var initialOrientation = window.orientation;
		  window.addEventListener("orientationchange", function () {
		    // if (window.orientation!== initialOrientation) {
		    //   // 阻止横屏，将屏幕方向恢复到初始状态
		    //   window.orientation = initialOrientation;
		    // }
			if (!screen.lockOrientation && myPortraitQuery.matches) {
			  // 浏览器不支持Screen Orientation API且当前是竖屏，可能需要提示用户保持竖屏
			  alert("为了获得最佳体验，请保持设备竖屏。");
			}
		  });
		}
		
		window.addEventListener("load", function () {
		  if (screen.lockOrientation) {
		    screen.lockOrientation(["portrait-primary", "portrait-secondary"]);
		  } else {
		    // 如果不支持，使用旧的方法（如上面的window.orientation方法）
		    preventLandscape();
		  }
		});
	</script>
  </body>
</html>
